<template>
	<uni-list>
		<uni-list-item  v-for="(workReport,index) in workList" :key="index">
			<template slot="body">
				<uni-card is-full class="uni-list-card" padding="0" spacing="0" >
					<template v-slot:title>
						<view class="item-card-title-layout">
							<text class="item-card-title">【采购入库】PO202301301000</text>
							<text class="item-card-status" :class="{'status-1':workReport.status == 'PREPARE',
																   'status-3':workReport.status == 'APPROVING',
																   'status-4':workReport.status == 'FINISHED'}" >
								{{workReport.status == 'PREPARE'?"未提交":workReport.status == 'APPROVING'?'待处理':'已处理'}}
								</text>
						</view>
					</template>
					<view class="list-item-content">
						<view class="list-item-body">
							<view class="item-label">单据名称：</view>
							<view class="u-line-1 item-value">{{workReport.itemName}}</view>
						</view>
						<view class="list-item-body">
							<view class="item-label">总数量：</view>
							<view class="u-line-1 item-value">{{workReport.quantityQualified}}</view>
						</view>
						<view class="list-item-body">
							<view class="item-label">对应仓库：</view>
							<view class="u-line-1 item-value">{{workReport.quantityUnquanlified}}</view>
						</view>
						<view class="list-item-body">
							<view class="item-label">起草时间：</view>
							<view class="u-line-1 item-value">{{workReport.createTime}}</view>
						</view>
					</view>

					<template v-if="workReport.status != 'FINISHED' && workReport.status != 'APPROVED'"  slot="actions" >
						<view class="card-actions">
							<view   @click="buttonClick(button,workReport)" v-for="(button,index)  in showButtonByStatus(workReport.status)" :key="index" :class="{division:index + 1 < showButtonByStatus(workReport.status).length,withdraw:button.type == 'withdraw'}" class="card-actions-item">{{button.txt}}</view>
						</view>
					</template>
				</uni-card>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props:{
			workList:{
				type:Array,
				required:true
			}
		},
		methods: {
			buttonClick(button,workReport){
				if(button.type == "submit"){
					uni.showModal({
						title:"确认提交",
						content:"确认提交处理当前单据？",
						showCancel:true,
						cancelText:"取消",
						confirmText:"确认",
						success:(res)=> {
							if(res.confirm){
								// 用户点击确定  
								const updataReport = Object.assign(workReport,{status:"APPROVING"})
							    this.$u.api.feedback.updataFeedBack(updataReport).then(res=>{
									this.$emit("updataWorkReport",workReport)
							   }).catch(err=>{
								  console.log(err)
							   })
							}else{
							  // 否则点击了取消   
							}		
						}
					})
					
				}else if(button.type == 'update'){
					this.$u.vuex("vuex_currentFeedBack",workReport);
					uni.navigateTo({
						url:"/pages/sys/work_report/index?mode=updata"
					})
					
				}else if(button.type == 'delete'){
					uni.showModal({
						title:"确认删除",
						content:"确认删除当前单据？",
						showCancel:true,
						cancelText:"取消",
						confirmText:"确认",
						success:(res)=> {
							if(res.confirm){
								// 用户点击确定  
							    this.$u.api.feedback.deleteFeedBack(workReport.recordId).then(res=>{
									this.$emit("deleteWorkReport",workReport)
							   }).catch(err=>{
								  console.log(err)
							   })
							}else{
							  // 否则点击了取消  
							}		
						}
					})
				}else if('withdraw' == button.type){
					uni.showModal({
						title:"确认撤回",
						content:"确认撤回当前单据？",
						showCancel:true,
						cancelText:"取消",
						confirmText:"确认",
						success:(res)=> {
							if(res.confirm){
								// 用户点击确定  
							   const updataReport = Object.assign(workReport,{status:"PREPARE"})
								this.$u.api.feedback.updataFeedBack(updataReport).then(res=>{
								this.$emit("updataWorkReport",workReport)
							   }).catch(err=>{
							   		console.log(err)
							   })
							}else{
							  // 否则点击了取消  
							}		
						}
					})
				}
			},
			showButtonByStatus(status) {
				console.log(status)
				if(status == 'APPROVING'){
					return[
						{
							txt: "撤销",
							type: "withdraw"
						}
					]
				}
				return [
					{
						txt: "删除",
						type: "delete"
					},
					{
						txt: "修改",
						type: "update"
					},
					{
						txt: "提交",
						type: "submit"
					}
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-list-card {}

	.item-card-title-layout {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin:0 20rpx;
		padding: 20rpx 0;
		border-bottom: 1px solid rgb(214, 215, 217);

		.item-card-title {
			font-size: 32rpx;
			color: #5a5a5a;
		}

		.item-card-status {
			padding: 5rpx 8rpx;
			font-size: 26rpx;
			color: #fff;

			&.status-1 {
				background-color: #9a9998;
			}

			&.status-2 {
				background-color: #f9ae3d;
			}

			&.status-3 {
				background-color: #3c9cff;
			}

			&.status-4 {
				background-color: #5ac725;
			}
			&.status-5 {
				background-color: #f56c6c;
			}
		}
	}

	.list-item-content {
		padding: 20rpx;
		border-bottom: 1px solid rgb(214, 215, 217);

		.list-item-body {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			line-height: 56rpx;

			.item-label,
			.item-value {
				color: #6a6a6a;
				font-size: 28rpx;
			}
		}
	}
	.card-actions{
		display: flex;
		flex-direction: row;
		align-items: center;
		.card-actions-item{
			font-size: 25rpx;
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			&.withdraw{
				color: #f56c6c;
			}
			&.division{
				border-right: 1px solid rgb(214, 215, 217) ;
			}
		}
	}
</style>
